<template>
	<section class="margin-table">
		<div class="module-opera" >
		  <el-form :model="searchForm" :rules="rules" ref="searchForm" label-width="130px" >
		    <el-form-item label="品牌名称">
           <el-autocomplete
              v-model="searchForm.region"
              icon='search'
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入品牌名称"
              @select="handleSelect"
            ></el-autocomplete>
		    </el-form-item>

		    <el-form-item label="授权商家名称" prop="name">
		      <el-input @blur='checkBrand' :maxlength='input_number' v-model="searchForm.name" style='width: 265px;'></el-input>
		    </el-form-item>
		    
		    <el-form-item label="平台" prop="type">
		      <el-checkbox-group v-model="searchForm.type">
		        <el-checkbox label="天猫" name="type"></el-checkbox>
		        <el-checkbox label="淘宝" name="type"></el-checkbox>
		        <el-checkbox label="京东" name="type"></el-checkbox>
		        <el-checkbox label="一号店" name="type"></el-checkbox>
		      </el-checkbox-group>
		    </el-form-item>

		   <!--  <el-form-item label="备注">
		      <el-input type="textarea" :maxlength='200' v-model="searchForm.text"  style='width: 265px;'></el-input>
		    </el-form-item> -->
		    
		    <div class="bottom-btn" style="margin-left:200px;">
		        <el-button @click="submitForm(searchForm,1)" size="small">继续添加</el-button>
		        <el-button @click="submitForm(searchForm,2)"  type="primary" size="small">提交</el-button>
		    </div>

		  </el-form>
		</div>
	</section>
</template>
<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree, Button, Table, TableColumn, Checkbox, CheckboxGroup, Message,MessageBox, Pagination, Dialog, Autocomplete
    } from 'element-ui'
    import { SELLER_TOTALCOUNT, SELLER_CURRENTPAGE, SELLER_PAGESIZE } from '../../store/mutation-types/seller/index.js'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Autocomplete);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    
    export default {
      head(){
          return {
              title: "新增授权商家",
              meta: [
                  { hid: 'selleradd', name: 'selleradd', content: 'selleradd'}
              ]
          }
      },
      data() {
      	return {
      		tabName: '新增授权商家',
          input_number: 20,
          searchId: '',
          add: false,//是否提示添加成功
          searchForm: {
            region: '',
            name: '',
            type: [],
            text: '',
          },
          rules: {
            region: [
              { required: true, message: '请选择品牌名称', trigger: 'change' }
            ],
            name: [
              { required: true, message: '请输入授权商家名称', trigger: 'blur' },
              { min: 0, max: 20, message: '长度不得超过 20 字符', trigger: 'blur' }
            ],
            type: [
              { type: 'array', required: true, message: '请至少选择一个平台', trigger: 'change' }
            ],
          }
      	}
      },
      computed: {
          ...mapGetters({
              'pageTabsList': 'getPageTabsList',
              'currentPage': 'currentPageSeller',
              'totalCount': 'totalCountSeller',
              'pageSize': 'pageSizeSeller',
          })
      },
      methods: {
        checkBrand() {
          if (this.searchForm.name!='') {
            this.$store.dispatch('checkAgencyName',{
              brandId: this.searchId,
              agencyName: this.searchForm.name 
            }).then((res)=>{
              let platType = ['京东','一号店','淘宝','天猫']
              if (res && res.data.data!=null) {
                res.data.data.map(type=>{
                  this.searchForm.type.push(platType[(type-1)])
                })
              }else {

              }
            })
          }          
        },
        addAgency() {
          if (this.searchId=='') {
            this.$message({
              message: '请选择品牌名称',
              type: 'error'
            });
          }else {
            let platType = []
            this.searchForm.type.map(type=>{
              switch (type) {
                case '天猫':
                  platType.push(4)
                  break;
                case '淘宝':
                  platType.push(3)
                  break;
                case '京东':
                  platType.push(1)
                  break;
                case '一号店':
                  platType.push(2)
                  break;
              }
            })
            this.$store.dispatch('addAgency',{
              brandId: this.searchId,
              agencyName: this.searchForm.name,
              platType: platType.join(),
              // remark: this.searchForm.text
            }).then((res)=>{
              if (res) {
                if (this.add == 1) {
                  this.$router.go(0)
                }else {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  this.$router.push({path:'/seller'})
                }
              }
              
            })
          }
          
        },
        getBrandList(val) {
          this.$store.dispatch('getSelfBrandsListchu').then((res)=>{
            if (res) {
              this.brandList = res.data.data
              this.brandList.map(list=>{
                Vue.set(list,'value',list.brandName)
              })
            }
          })
        },
        querySearchAsync(queryString, cb) {
          var restaurants = this.brandList;
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
            cb(results);
        },
        createStateFilter(queryString) {
          return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        handleSelect(item) {
          this.searchId = item.id
        },
        submitForm(searchForm,i) {
          this.add = i
          this.$refs.searchForm.validate((valid) => {
           if (valid) {
             this.addAgency()
           } else {
             return false;
           }
          });
        },
      },
      created () {
          //pageTab
          if(process.BROWSER_BUILD) {
              if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                  let arr = this.pageTabsList;
                  arr[arr.length-1].name = this.tabName;
                  this.$store.commit('PAGETABSLIST',{data:arr})
              }
          }
          this.getBrandList()
      }
    }

</script>
<style scoped lang="scss">
  .margin-table {
    margin-top: 20px;
  }
</style>